<template>
  <div class="app-container">
    舱位列表
    <!--查询表单-->
    <el-form :inline="true"
             class="demo-form-inline">
      <el-form-item>
        <el-input v-model="productsQuery.product_name"
                  placeholder="商品名" />
      </el-form-item>
      <el-form-item>
        <el-select v-model="productsQuery.product_type"
                   clearable
                   placeholder="产品类型">
          <el-option value="sea"
                     label="海运" />
          <el-option value="line"
                     label="陆运" />
          <el-option value="air"
                     label="空运" />
          <el-option value="railway"
                     label="铁路" />
        </el-select>
      </el-form-item>
      <el-form-item label="添加时间">
        <el-date-picker v-model="productsQuery.begin"
                        type="datetime"
                        placeholder="选择开始时间"
                        value-format="yyyy-MM-dd HH:mm:ss"
                        default-time="00:00:00" />
      </el-form-item>
      <el-form-item>
        <el-date-picker v-model="productsQuery.end"
                        type="datetime"
                        placeholder="选择截止时间"
                        value-format="yyyy-MM-dd HH:mm:ss"
                        default-time="00:00:00" />
      </el-form-item>
      <el-button type="primary"
                 icon="el-icon-search"
                 @click="getList()">查询</el-button>
      <el-button type="primary"
                 icon="el-icon-download"
                 @click="loadData()">导出</el-button>
      <el-button type="default"
                 icon="el-icon-refresh-left"
                 @click="resetData()">重置</el-button>
    </el-form>
    <!-- 表格 -->
    <el-table :data="list"
              border
              fit
              highlight-current-row>
      <el-table-column label="序号"
                       width="100"
                       align="center">
        <template slot-scope="scope">
          {{ (productsQuery.page - 1) * productsQuery.pageSize + scope.$index + 1 }}
        </template>
      </el-table-column>
      <el-table-column prop="name"
                       label="产品名称"
                       width="100">
        <template slot-scope="scope">
          {{ scope.row.product_name }}
        </template>
      </el-table-column>
      <el-table-column label="产品类型"
                       width="100">
        <template slot-scope="scope">
          <!-- {{ scope.row.product_type === 'sea'?'海运':'空运' }} -->
          {{ settype(scope.row.product_type) }}
        </template>
      </el-table-column>
      <el-table-column prop="intro"
                       label="发布者">
        <template slot-scope="scope">
          {{ scope.row.company_name }}
          <!-- 提前加载 -->
          {{ status(scope.row.product_status) }}
        </template>
      </el-table-column>
      <el-table-column prop="gmtCreate"
                       label="状态"
                       width="150">
        <template slot-scope="scope">
          <el-tag :type="Tagtype"
                  size="small"> {{ statusText }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="gmtCreate"
                       label="发布时间"
                       width="200">
        <template slot-scope="scope">
          <!-- {{ utils.getdate(scope.row.publish_time) }} -->
          {{ scope.row.publish_time }}

        </template>
      </el-table-column>
      <el-table-column prop="sort"
                       label="操作时间"
                       width="200">
        <template slot-scope="scope">
          {{ scope.row.update_time == null ? '-' : scope.row.update_time }}
        </template>
      </el-table-column>
      <el-table-column label="操作"
                       width="300"
                       align="center">
        <template slot-scope="scope">
          <el-button v-if="scope.row.product_status === null || scope.row.product_status === ''"
                     type="warning"
                     size="mini"
                     icon="el-icon-view"
                     @click="auditOrderById(scope.row.product_id)">审核</el-button>
          <router-link :to="'/products/edit/'+scope.row.product_id">
            <el-button type="primary"
                       size="mini"
                       icon="el-icon-edit"
                       style="margin-left:10px">修改</el-button>
          </router-link>

          <el-button type="danger"
                     size="mini"
                     icon="el-icon-delete"
                     style="margin-left:10px"
                     @click="removeDataById(scope.row.product_id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <el-pagination :current-page="productsQuery.page"
                   :page-size="productsQuery.pageSize"
                   :total="total"
                   style="padding: 30px 0; text-align: center;"
                   layout="total, prev, pager, next, jumper"
                   @current-change="nextList" />
  </div>
</template>

<script>
// 引入调用teacher.js文件
import productsApi from '@/api/products'
import { time } from 'echarts'
export default {
  inject: ['reload'],
  data () {
    return {

      list: null, // 查询之后接口返回集合
      total: 0, // 总记录数
      productsQuery: {
        product_name: '',
        product_type: '',
        begin: '',
        end: '',
        page: 1, // 当前页
        pageSize: 10 // 每页记录数
      },
      publish_date: '',
      Tagtype: '',
      statusText: ''
    }
  },

  // computed: {
  //   begin () {
  //     return this.productsQuery.begin
  //   },
  //   end () {
  //     return this.productsQuery.end
  //   }
  // },
  // watch: {
  //   begin (val1, val2) {
  //     console.log(val1, val2)
  //     if (val1 !== val2) {
  //       this.productsQuery.begin = this.utils.gettime(this.productsQuery.begin)
  //     }
  //   },
  //   end (val1, val2) {
  //     console.log(val1, val2)
  //     if (val1 !== val2) {
  //       this.productsQuery.end = this.utils.gettime(this.productsQuery.end)
  //     }
  //   }
  // },

  created () { // 页面渲染之前执行，一般调用methods定义的方法
    // 调用
    this.getList()
  },
  methods: {
    // 讲师列表的方法
    getList () {
      console.log(this.productsQuery)
      // if (this.productsQuery.begin && this.productsQuery.end) {
      //   this.productsQuery.begin = this.utils.gettime(this.productsQuery.begin)
      //   this.productsQuery.end = this.utils.gettime(this.productsQuery.end)
      // }
      productsApi.getProductsListPage(this.productsQuery)
        .then(response => { // 请求成功
          // response接口返回的数据
          console.log(response)
          this.list = response.data
          this.total = response.total
          // console.log(this.list)
          // console.log(this.total)
        })
    },
    // 删除
    removeDataById (id) {
      this.$confirm('此操作将永久删除舱位记录, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => { // 点击确定，执行then方法
        productsApi.deleteProductId(id)
          .then(response => { // 删除成功
            this.$message({
              type: 'success',
              message: `${response.message}`
            })
            // 回到列表页面
            this.getList()
          })
      }) // 点击取消，执行catch方法
    },
    // 审核
    auditOrderById (id) {
      const obj = {
        product_id: id,
        product_status: '',
        update_time: this.utils.getNowTime()
      }
      this.$confirm('此操作确认该舱位是否通过审核?', '确认审核', {
        confirmButtonText: '通过',
        cancelButtonText: '不通过',
        type: 'info',
        center: true
      }).then(() => { // 点击确定，执行then方法
        obj.product_status = '1'
        console.log(obj)
        productsApi.updateproductInfo(obj)
          .then(response => {
            // 提示信息
            console.log(response)
            this.$message({
              type: 'success',
              message: `舱位:${id},审核通过`
            })

            this.reload()
          })
      }).catch(() => {
        obj.product_status = '0'
        productsApi.updateproductInfo(obj)
          .then(response => {
            // 提示信息
            console.log(response)
            this.$message({
              type: 'warning',
              message: `舱位:${id},审核不通过`
            })
            this.reload()
          })
      })
    },
    // 重置
    resetData () {
      this.productsQuery = {
        product_name: '',
        product_type: '',
        begin: '',
        end: '',
        page: 1, // 当前页
        pageSize: 10 // 每页记录数
      }
      this.getList()
    },
    // 导出
    loadData () {
      // this.$router.push('/excel')
      this.export2Excel()
    },
    // 下一页
    nextList (value) {
      // console.log(value)
      this.productsQuery.page = value
      this.getList()
    },
    status (data, time) {
      // this.publish_date = this.utils.getdate(time)
      // console.log(this.publish_date)
      if (data === '0') {
        this.Tagtype = 'danger'
        this.statusText = '审核不通过'
      } else if (data === null || data === '') {
        this.Tagtype = 'warning'
        this.statusText = '等待审核'
      } else {
        this.Tagtype = 'success'
        this.statusText = '审核通过'
      }
    },
    settype (item) {
      switch (item) {
        case 'sea':
          return '海运'
        case 'line':
          return '陆运'
        case 'air':
          return '空运'
        case 'railway':
          return '铁路'
        default:
          break
      }
    },
    export2Excel () {
      require.ensure([], () => {
        const { export_json_to_excel } = require('@/vendor/Export2Excel')
        const tHeader = [
          '舱位id', '舱位类型', '发布者', '状态', '发布时间', '操作时间'
        ]
        const filterVal = [
          'product_id',
          'product_type',
          'company_name',
          'product_status',
          'publish_time',
          'update_time'
        ]
        const table = this.list
        // for (let index = 0; index < table.length; index++) {
        //   table[index].publish_time = this.utils.getdate(table[index].publish_time)
        // }
        const data = this.formatJson(filterVal, table)
        export_json_to_excel(tHeader, data, '舱位列表数据')
      })
    },
    /**
       * 自定义转换导出数据格式
       */
    formatJson (filterVal, jsonData) {
      return jsonData.map(v => filterVal.map(item => {
        if (item === 'vs') {
          return v['kill'] + '-' + v['death'] + '-' + v['assist']
        } else {
          return v[item]
        }
      }))
    }
  }
}
</script>

<style scoped>
.line {
  text-align: center;
}

.el-message-box__btns {
  text-align: center;
}
</style>

